<!DOCTYPE html>
<html>
<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收款明细管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/dist/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="__PUBLIC__/dist/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="__PUBLIC__/dist/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <!-- Data Tables -->
    <link href="__PUBLIC__/dist/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>收款明细管理</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <form method="get">
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="nature_id">
                                        <option value="0">运营性质</option>
                                        {foreach name="businnatures" item="value"}
                                        <option value="{$value.id}" {if condition="$nature_id!=null && $value.id == $nature_id"}selected{/if}>{$value.name} </option> 
                                        {/foreach} 
                                    </select> 
                                </div> 
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="hire_mode_id">
                                        <option value="0">租赁类型</option>
                                        {foreach name="modes" item="value"}
                                        <option value="{$value.id}" {if condition="$hire_mode_id!=null && $value.id == $hire_mode_id"}selected{/if}>{$value.config_name} </option> 
                                        {/foreach} 
                                    </select>
                                </div> 
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="customer_id">
                                        <option value="0">所属客户</option>
                                        {foreach name="customers" item="value"}
                                        <option value="{$value.id}" {if condition="$customer_id!=null && $value.id == $customer_id"}selected{/if}>{$value.real_name} </option> 
                                        {/foreach} 
                                    </select>
                                </div> 
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="store_id">
                                        <option value="0">所属网点</option>
                                        {foreach name="stores" item="value"}
                                        <option value="{$value.id}" {if condition="$store_id!=null && $value.id == $store_id"}selected{/if}>{$value.name} </option> 
                                        {/foreach} 
                                    </select>
                                </div> 
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="pay_mode_id">
                                        <option value="">付款方式</option>
                                        <option value="0" {if condition="$pay_mode_id!=null && 0 == $pay_mode_id"}selected{/if}>现金 </option> 
                                        <option value="1" {if condition="$pay_mode_id!=null && 1 == $pay_mode_id"}selected{/if}>微信 </option> 
                                        <option value="2" {if condition="$pay_mode_id!=null && 2 == $pay_mode_id"}selected{/if}>支付宝 </option> 
                                        <option value="3" {if condition="$pay_mode_id!=null && 3 == $pay_mode_id"}selected{/if}>银行转账 </option> 
                                    </select> 
                                </div>
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="state_id">
                                        <option value="">服务状态</option>
                                        <option value="0" {if condition="$state_id!=null && 0 == $state_id"}selected{/if}>待付款</option>
                                        <option value="1" {if condition="$state_id!=null && 1 == $state_id"}selected{/if}>已付订金</option>
                                        <option value="2" {if condition="$state_id!=null && 2 == $state_id"}selected{/if}>车辆已归</option>
                                    </select>
                                </div>
                                <div class="col-sm-2 m-b-xs">
                                    <select class="form-control" name="pay_state_id">
                                        <option value="">付款状态</option>
                                        <option value="0" {if condition="$pay_state_id!=null && 0 == $pay_state_id"}selected{/if}>待付款</option>
                                        <option value="1" {if condition="$pay_state_id!=null && 1 == $pay_state_id"}selected{/if}>已付订金</option>
                                        <option value="2" {if condition="$pay_state_id!=null && 2 == $pay_state_id"}selected{/if}>已付押金</option>
                                        <option value="3" {if condition="$pay_state_id!=null && 3 == $pay_state_id"}selected{/if}>已付保证金</option>
                                    </select> 
                                </div>
                                <div class="col-sm-3 m-b-xs">
                                    <div class="input-daterange input-group" id="datepicker">
                                        <input type="text" class=" form-control" name="start_time" value="{$start_time_str}" placeholder="开始时间" onkeyup="filter(this)"/>
                                        <span class="input-group-addon">到</span>
                                        <input type="text" class=" form-control" name="end_time" value="{$end_time_str}" placeholder="结束时间" onkeyup="filter(this)"/>
                                    </div>
                                </div>
                                <div class="col-sm-1 m-b-xs">
                                    <input type="submit" class="btn btn-primary" value="搜索" />
                                </div>
                            </form>
                            <div class="col-sm-12">
                                <div class="panel blank-panel">
                                    <div class="panel-heading">
                                        <div class="panel-options">
                                            <ul class="nav nav-tabs">
                                                <li class="active">
                                                    <a data-toggle="tab" href="tabs_panels.html#tab-1" aria-expanded="false">
                                                        <i class="fa fa-bar-chart-o"></i>报表
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a data-toggle="tab" href="tabs_panels.html#tab-2" aria-expanded="true">
                                                        <i class="fa fa-signal"></i>列表
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="panel-body">
                                        <div class="tab-content">
                                            <div id="tab-1" class="tab-pane active">
                                                <div class="col-sm-12">
                                                    <div class="chart">
                                                        <div id="statistics" style="height: 400px;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="tab-2" class="tab-pane">
                                                <table class="table table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th>日期</th>
                                                            <th>订单数</th>
                                                            <th>收入金额</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {volist name="list" id="v"}
                                                        <tr class="gradeX">
                                                            <td>{$v.time}</td>
                                                            <td>{$v.count}</td>
                                                            <td>{$v.amount}</td>
                                                        </tr>
                                                        {/volist}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__PUBLIC__/dist/js/jquery.min.js?v=2.1.4"></script>
    <script src="__PUBLIC__/dist/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="__PUBLIC__/dist/js/demo/peity-demo.min.js"></script>
    <script src="__PUBLIC__/dist/js/content.min.js?v=1.0.0"></script>
    <script src="__PUBLIC__/dist/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="__PUBLIC__/dist/js/demo/sparkline-demo.min.js"></script>
    <script src="__PUBLIC__/dist/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () { $(".chart").easyPieChart({ barColor: "#f8ac59", scaleLength: 5, lineWidth: 4, size: 80 }); $(".chart2").easyPieChart({ barColor: "#1c84c6", scaleLength: 5, lineWidth: 4, size: 80 }); var data2 = [[gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8], [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4], [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6], [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8], [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6], [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13], [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8], [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]]; var data3 = [[gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700], [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589], [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700], [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786], [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888], [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567], [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900], [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]]; var dataset = [{ label: "订单数", data: data3, color: "#1ab394", bars: { show: true, align: "center", barWidth: 24 * 60 * 60 * 600, lineWidth: 0 } }, { label: "付款数", data: data2, yaxis: 2, color: "#464f88", lines: { lineWidth: 1, show: true, fill: true, fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2 }] } }, splines: { show: false, tension: 0.6, lineWidth: 1, fill: 0.1 }, }]; var options = { xaxis: { mode: "time", tickSize: [3, "day"], tickLength: 0, axisLabel: "Date", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: "Arial", axisLabelPadding: 10, color: "#838383" }, yaxes: [{ position: "left", max: 1070, color: "#838383", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: "Arial", axisLabelPadding: 3 }, { position: "right", clolor: "#838383", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: " Arial", axisLabelPadding: 67 }], legend: { noColumns: 1, labelBoxBorderColor: "#000000", position: "nw" }, grid: { hoverable: false, borderWidth: 0, color: "#838383" } }; function gd(year, month, day) { return new Date(year, month - 1, day).getTime() } var previousPoint = null, previousLabel = null; $.plot($("#flot-dashboard-chart"), dataset, options); var mapData = { "US": 298, "SA": 200, "DE": 220, "FR": 540, "CN": 120, "AU": 760, "BR": 550, "IN": 200, "GB": 120, }; $("#world-map").vectorMap({ map: "world_mill_en", backgroundColor: "transparent", regionStyle: { initial: { fill: "#e4e4e4", "fill-opacity": 0.9, stroke: "none", "stroke-width": 0, "stroke-opacity": 0 } }, series: { regions: [{ values: mapData, scale: ["#1ab394", "#22d6b1"], normalizeFunction: "polynomial" }] }, }) });
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>

<script src="__PUBLIC__/dist/js/plugins/echarts/echarts-all.js"></script>
<script>
    $('#start_time').datepicker().on('changeDate', function (e) {
        //获取选取的开始时间
        var endTimeStart = $("#start_time").val();
        //设置开始时间
        $('#end_time').datepicker('setStartDate', endTimeStart);
    });
    $('#end_time').datepicker().on('changeDate', function (e) {
        //获取选取的开始时间
        var startTimeStart = $("#end_time").val();
        //设置开始时间
        $('#start_time').datepicker('setEndDate', startTimeStart);
    });
    var res = {$res};
    var myChart = echarts.init(document.getElementById('statistics'), 'macarons');
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        legend: {
            data: ['订单数', '收入金额']
        },
        xAxis: [
            {
                type: 'category',
                data: res.time
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '订单数',
                axisLabel: {
                    formatter: '{value}'
                }
            }, {
                type: 'value',
                name: '收入金额',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '订单数',
                type: 'bar',
                data: res.count
            }, {
                name: '收入金额',
                type: 'line',
                yAxisIndex: 1,
                data: res.amount
            }
        ]
    };
    myChart.setOption(option);
</script>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->

</html>